@vue-material/core
Version:
Yet another 'Material Design Components' library for Vue3.
79 lines (78 loc) • 2.26 kB
JavaScript
import "../../assets/button.css.js";
import { defineComponent, openBlock, createBlock, mergeProps, unref, withCtx, createVNode, createElementVNode, renderSlot } from "vue";
import { keyClick } from "../../utils/dom/events.js";
import { rippleEffect } from "../../utils/dom/ripple.js";
import { getBoxProps } from "../Box/util.js";
import _sfc_main$1 from "../Box/box.vue.js";
import _sfc_main$3 from "../Misc/hybrid-component.vue.js";
import _sfc_main$2 from "../Misc/hybrid-icon.vue.js";
const _hoisted_1 = { class: "md-button-label" };
const _sfc_main = /* @__PURE__ */ defineComponent({
...{ name: "MdButton" },
__name: "button",
props: {
leftIcon: {},
rightIcon: {},
variant: {},
label: {},
scale: {},
px: {},
py: {},
pl: {},
pr: {},
pt: {},
pb: {},
mx: {},
my: {},
ml: {},
mr: {},
mt: {},
mb: {},
width: {},
height: {},
m: {},
p: {},
r: {},
as: {},
bg: {},
styled: {}
},
setup(__props) {
const props = __props;
const boxProps = getBoxProps(props, {
r: "#rounded"
});
return (_ctx, _cache) => {
return openBlock(), createBlock(_sfc_main$1, mergeProps({
as: "button",
type: "button",
class: ["md-button", _ctx.variant ?? "filled"]
}, unref(boxProps), {
onClick: unref(rippleEffect),
onPointerdown: unref(rippleEffect),
onKeydown: _cache[0] || (_cache[0] = ($event) => unref(keyClick)($event, ["Enter", " "])),
styled: { $scale: "raw:" + (_ctx.scale ?? 1), ..._ctx.styled }
}), {
default: withCtx(() => [
createVNode(_sfc_main$2, {
class: "md-button-icon left",
icon: _ctx.leftIcon
}, null, 8, ["icon"]),
createElementVNode("div", _hoisted_1, [
renderSlot(_ctx.$slots, "default", {}, () => [
createVNode(_sfc_main$3, { as: _ctx.label }, null, 8, ["as"])
])
]),
createVNode(_sfc_main$2, {
class: "md-button-icon right",
icon: _ctx.rightIcon
}, null, 8, ["icon"])
]),
_: 3
}, 16, ["class", "onClick", "onPointerdown", "styled"]);
};
}
});
export {
_sfc_main as default
};