@sandlada/vue-mdc
Version:
143 lines (142 loc) • 4.9 kB
JavaScript
/**
* @license
* Copyright 2025 Sandlada & Kai Orion
* SPDX-License-Identifier: MIT
*/
import { defineComponent, ref, onMounted, onBeforeUnmount, createVNode } from "vue";
import { useReflectAttribute } from "../../node_modules/@glare-labs/vue-reflect-attribute/build/vue-reflect-attribute.js";
import { componentNamePrefix } from "../../internals/component-name-prefix/component-name-prefix.js";
import { isServer } from "../../utils/is-server.js";
import { Elevation } from "../elevation/elevation.js";
import { FocusRing } from "../focus-ring/focus-ring.js";
import "../../internals/navigation/render-navigation-destination.js";
import { Ripple } from "../ripple/ripple.js";
import { props, ButtonAppearance } from "./button.definition.js";
import css from "./styles/button.module.scss.js";
const Button = /* @__PURE__ */ defineComponent({
name: `${componentNamePrefix}-button`,
slots: {},
props,
setup(props2, {
slots
}) {
const root = ref(null);
const _appearance = ref(props2.appearance);
const _disabled = ref(props2.disabled);
const _type = ref(props2.type);
const _href = ref(props2.href);
const _target = ref(props2.target);
const _form = ref(props2.form);
const _name = ref(props2.name);
const _value = ref(props2.value);
useReflectAttribute(root, {
attributes: [{
attribute: "appearance",
ref: _appearance,
reflect: true,
type: "string"
}, {
attribute: "disabled",
ref: _disabled,
reflect: true,
type: "boolean"
}, {
attribute: "type",
ref: _type,
reflect: true,
type: "string"
}, {
attribute: "href",
ref: _href,
reflect: true,
type: "string"
}, {
attribute: "target",
ref: _target,
reflect: true,
type: "string"
}, {
attribute: "form",
ref: _form,
reflect: true,
type: "string"
}, {
attribute: "name",
ref: _name,
reflect: true,
type: "string"
}, {
attribute: "value",
ref: _value,
reflect: true,
type: "string"
}]
});
const handleClick = (e) => {
if (_href.value && _disabled.value) {
e.stopImmediatePropagation();
e.preventDefault();
return;
}
};
onMounted(() => {
if (isServer()) {
return;
}
root.value?.addEventListener("click", handleClick);
});
onBeforeUnmount(() => {
root.value?.removeEventListener("click", handleClick);
});
return () => {
const elevationButtonArray = [ButtonAppearance.Elevated, ButtonAppearance.Filled, ButtonAppearance.FilledTonal];
const needElevation = elevationButtonArray.includes(_appearance.value);
const needOutline = _appearance.value === ButtonAppearance.Outlined;
const iconState = slots["leading-icon"] ? css.left : slots["trailing-icon"] ? css.right : null;
const isLink = _href.value !== null;
const renderContent = createVNode("span", {
"class": css.button
}, [createVNode("span", {
"class": css.touch
}, null), slots["leading-icon"] && slots["leading-icon"](), createVNode("span", {
"class": [css.label]
}, [slots.default && slots.default()]), slots["trailing-icon"] && slots["trailing-icon"]()]);
const renderButtonWrapper = createVNode("button", {
"data-component": "button",
"class": [css[_appearance.value], iconState, _disabled.value && css.disabled],
"role": "button",
"ref": root,
"tabindex": _disabled.value ? -1 : 0
}, [createVNode(Ripple, null, null), createVNode(FocusRing, {
"shapeInherit": false
}, null), needElevation && createVNode(Elevation, null, null), needOutline && createVNode("div", {
"aria-hidden": "true",
"class": [css.outline]
}, null), createVNode("div", {
"aria-hidden": "true",
"class": [css.background]
}, null), renderContent]);
const renderLinkWrapper = createVNode("a", {
"data-component": "button",
"class": [css[_appearance.value], iconState, _disabled.value && css.disabled],
"role": "button",
"ref": root,
"tabindex": _disabled.value ? -1 : 0
}, [createVNode(Ripple, null, null), createVNode(FocusRing, {
"shapeInherit": false
}, null), needElevation && createVNode(Elevation, null, null), needOutline && createVNode("div", {
"aria-hidden": "true",
"class": [css.outline]
}, null), createVNode("div", {
"aria-hidden": "true",
"class": [css.background]
}, null), renderContent]);
return isLink ? renderLinkWrapper : renderButtonWrapper;
};
},
inheritAttrs: true
});
export {
Button
};
//# sourceMappingURL=button.js.map