element-plus
Version:
A Component Library for Vue 3
148 lines (145 loc) • 6.16 kB
JavaScript
import { defineComponent, useSlots, inject, computed, ref, Text, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, Fragment, renderSlot, createBlock, withCtx, resolveDynamicComponent, createCommentVNode } from 'vue';
import { useCssVar } from '@vueuse/core';
import { TinyColor } from '@ctrl/tinycolor';
import { ElIcon } from '../../icon/index.mjs';
import '../../../hooks/index.mjs';
import '../../../tokens/index.mjs';
import { buttonProps, buttonEmits } from './button.mjs';
import { buttonGroupContextKey } from '../../../tokens/button.mjs';
import { useGlobalConfig } from '../../../hooks/use-global-config/index.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useFormItem } from '../../../hooks/use-form-item/index.mjs';
import { useSize, useDisabled } from '../../../hooks/use-common-props/index.mjs';
const _hoisted_1 = ["disabled", "autofocus", "type"];
const __default__ = {
name: "ElButton"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: buttonProps,
emits: buttonEmits,
setup(__props, { expose, emit }) {
const props = __props;
const slots = useSlots();
const buttonGroupContext = inject(buttonGroupContextKey, void 0);
const globalConfig = useGlobalConfig("button");
const ns = useNamespace("button");
const { form } = useFormItem();
const _size = useSize(computed(() => buttonGroupContext == null ? void 0 : buttonGroupContext.size));
const _disabled = useDisabled();
const _ref = ref();
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 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 /^\p{Unified_Ideograph}{2}$/u.test(text);
}
}
return false;
});
const typeColor = computed(() => useCssVar(`--el-color-${props.type}`).value);
const buttonStyle = computed(() => {
let styles = {};
const buttonColor = props.color || typeColor.value;
if (buttonColor) {
const color = new TinyColor(buttonColor);
const shadeBgColor = color.shade(10).toString();
if (props.plain) {
styles = {
"--el-button-bg-color": color.tint(90).toString(),
"--el-button-text-color": buttonColor,
"--el-button-hover-text-color": "var(--el-color-white)",
"--el-button-hover-bg-color": buttonColor,
"--el-button-hover-border-color": buttonColor,
"--el-button-active-bg-color": shadeBgColor,
"--el-button-active-text-color": "var(--el-color-white)",
"--el-button-active-border-color": shadeBgColor
};
} else {
const tintBgColor = color.tint(20).toString();
styles = {
"--el-button-bg-color": buttonColor,
"--el-button-border-color": buttonColor,
"--el-button-hover-bg-color": tintBgColor,
"--el-button-hover-border-color": tintBgColor,
"--el-button-active-bg-color": shadeBgColor,
"--el-button-active-border-color": shadeBgColor
};
}
if (_disabled.value) {
const disabledButtonColor = color.tint(50).toString();
styles["--el-button-disabled-bg-color"] = disabledButtonColor;
styles["--el-button-disabled-border-color"] = disabledButtonColor;
}
}
return styles;
});
const handleClick = (evt) => {
if (props.nativeType === "reset") {
form == null ? void 0 : form.resetFields();
}
emit("click", evt);
};
expose({
ref: _ref,
size: _size,
type: _type,
disabled: _disabled,
shouldAddSpace
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("button", {
ref_key: "_ref",
ref: _ref,
class: normalizeClass([
unref(ns).b(),
unref(ns).m(unref(_type)),
unref(ns).m(unref(_size)),
unref(ns).is("disabled", unref(_disabled)),
unref(ns).is("loading", _ctx.loading),
unref(ns).is("plain", _ctx.plain),
unref(ns).is("round", _ctx.round),
unref(ns).is("circle", _ctx.circle)
]),
disabled: unref(_disabled) || _ctx.loading,
autofocus: _ctx.autofocus,
type: _ctx.nativeType,
style: normalizeStyle(unref(buttonStyle)),
onClick: handleClick
}, [
_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"]))
], 2112)) : _ctx.icon ? (openBlock(), createBlock(unref(ElIcon), { key: 1 }, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
]),
_: 1
})) : 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)
], 14, _hoisted_1);
};
}
});
export { _sfc_main as default };
//# sourceMappingURL=button2.mjs.map