@sandlada/vue-mdc
Version:
75 lines (74 loc) • 2.5 kB
JavaScript
/**
* @license
* Copyright 2025 Sandlada & Kai Orion
* SPDX-License-Identifier: MIT
*/
import { defineComponent, ref, computed, 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 { 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 } from "./fab.definition.js";
import css from "./styles/fab.module.scss.js";
const Fab = /* @__PURE__ */ defineComponent({
name: `${componentNamePrefix}-fab`,
props,
slots: {},
setup(props2, {
slots
}) {
const root = ref(null);
const _size = ref(props2.size);
const _label = ref(props2.label);
const _appearance = ref(props2.appearance);
const _lowered = ref(props2.lowered);
useReflectAttribute(root, {
attributes: [{
attribute: "size",
ref: _size,
reflect: true,
type: "string"
}, {
attribute: "label",
ref: _label,
reflect: true,
type: "string"
}, {
attribute: "appearance",
ref: _appearance,
reflect: true,
type: "string"
}, {
attribute: "lowered",
ref: _lowered,
reflect: true,
type: "boolean"
}]
});
const isExtended = computed(() => _label.value !== null && _label.value !== "" && _label.value.length !== 0);
return () => {
const renderIcon = createVNode("span", {
"class": css.icon
}, [slots.default && slots.default()]);
const renderLabel = createVNode("span", {
"class": css.label
}, [_label.value]);
return createVNode("button", {
"data-component": "fab",
"class": [css.fab, isExtended.value && css.extended, css[_size.value], css[_appearance.value], _lowered.value && css.lowered, slots.default && css["has-icon"]],
"ref": root
}, [createVNode(Ripple, null, null), createVNode(Elevation, null, null), createVNode(FocusRing, {
"shapeInherit": false
}, null), createVNode("span", {
"class": css["touch-target"]
}, null), renderIcon, isExtended.value && renderLabel]);
};
},
inheritAttrs: true
});
export {
Fab
};
//# sourceMappingURL=fab.js.map