@sandlada/vue-mdc
Version:
110 lines (109 loc) • 3.33 kB
JavaScript
/**
* @license
* Copyright 2025 Sandlada & Kai Orion
* SPDX-License-Identifier: MIT
*/
import { defineComponent, ref, createVNode, Fragment } 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 { FocusRing } from "../focus-ring/focus-ring.js";
import "../../internals/navigation/render-navigation-destination.js";
import { Ripple } from "../ripple/ripple.js";
import { props } from "./icon-button.definition.js";
import css from "./styles/icon-button.module.scss.js";
const IconButton = /* @__PURE__ */ defineComponent({
name: `${componentNamePrefix}-icon-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"
}]
});
return () => {
const isLink = _href.value !== null;
const renderIcon = createVNode("span", {
"class": css.icon
}, [slots.default && slots.default()]);
const renderContent = createVNode(Fragment, null, [createVNode(Ripple, null, null), createVNode(FocusRing, {
"shapeInherit": false
}, null), createVNode("div", {
"aria-hidden": "true",
"class": css.touch
}, null), createVNode("div", {
"aria-hidden": "true",
"class": css.background
}, null), createVNode("div", {
"aria-hidden": "true",
"class": css.outline
}, null), renderIcon]);
const renderLink = createVNode("a", {
"class": [css[_appearance.value], _disabled.value && css.disabled],
"data-component": "icon-button",
"href": _href.value,
"ref": root
}, [renderContent]);
const renderButton = createVNode("button", {
"class": [css[_appearance.value], _disabled.value && css.disabled],
"data-component": "icon-button",
"ref": root
}, [renderContent]);
return isLink ? renderLink : renderButton;
};
},
inheritAttrs: true
});
export {
IconButton
};
//# sourceMappingURL=icon-button.js.map