@sandlada/vue-mdc
Version:
92 lines (91 loc) • 3.41 kB
JavaScript
/**
* @license
* Copyright 2025 Sandlada & Kai Orion
* SPDX-License-Identifier: MIT
*/
import { defineComponent, ref, computed, 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 "../ripple/ripple-state.js";
import { SplitButtonAppearance } from "./interface.js";
import { props } from "./split-button.definition.js";
import css from "./styles/split-button.module.scss.js";
const SplitButton = /* @__PURE__ */ defineComponent({
name: `${componentNamePrefix}-split-button`,
props,
slots: {},
emits: [],
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);
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"
}]
});
const isLink = computed(() => _href.value !== null);
const needOutline = computed(() => _appearance.value === SplitButtonAppearance.Outlined);
return () => {
const iconState = slots["leading-icon"] ? css.left : slots["trailing-icon"] ? css.right : null;
const RenderContent = () => createVNode(Fragment, null, [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"]()]), needOutline.value && createVNode("div", {
"aria-hidden": "true",
"class": [css.outline]
}, null), createVNode("div", {
"aria-hidden": "true",
"class": [css.background]
}, null), createVNode(Ripple, null, null), createVNode(FocusRing, null, null)]);
const wrapperClasses = [css[_appearance.value], iconState, _disabled.value && css.disabled];
const RenderLink = () => createVNode("a", {
"data-component": "split-button",
"role": "button",
"ref": root,
"class": wrapperClasses,
"tabindex": _disabled.value ? -1 : 0
}, [createVNode(RenderContent, null, null)]);
const RenderButton = () => createVNode("button", {
"data-component": "split-button",
"ref": root,
"class": wrapperClasses,
"tabindex": _disabled.value ? -1 : 0
}, [createVNode(RenderContent, null, null)]);
return isLink.value ? createVNode(RenderLink, null, null) : createVNode(RenderButton, null, null);
};
},
inheritAttrs: true
});
export {
SplitButton
};
//# sourceMappingURL=split-button.js.map