@nextcloud/vue
Version:
Nextcloud vue components
146 lines (145 loc) • 4.88 kB
JavaScript
import '../assets/NcFormBoxButton-C6EvdLK4.css';
import { reactive, inject, computed, defineComponent, toRef, createBlock, openBlock, mergeProps, unref, createSlots, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
import { q as mdiOpenInNew, r as mdiArrowTopRight } from "./mdi-XFJRiRqJ.mjs";
import { N as NcFormBoxItem } from "./NcFormBoxItem-BBP76Mkf.mjs";
import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
import { routerKey } from "vue-router";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
/*!
* SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
function useButtonLink(options) {
const props = reactive(options);
const hasVueRouterContext = inject(routerKey, null) !== null;
const tag = computed(() => {
if (hasVueRouterContext && props.to) {
return "RouterLink";
} else if (props.href) {
return "a";
} else {
return "button";
}
});
const isLink = computed(() => tag.value === "RouterLink" || tag.value === "a");
const isHyperLink = computed(() => tag.value === "a");
const isRouterLink = computed(() => tag.value === "RouterLink");
const isButton = computed(() => tag.value === "button");
const attrs = computed(() => {
if (tag.value === "RouterLink") {
return {
to: props.to,
activeClass: "active",
...props.additionalAttrs?.("RouterLink") ?? {}
};
} else if (tag.value === "a") {
return {
href: props.href,
target: props.target,
download: props.download || void 0,
rel: "nofollow noreferrer noopener",
...props.additionalAttrs?.("a") ?? {}
};
} else if (tag.value === "button") {
return {
type: props.type || "button",
disabled: props.disabled,
...props.additionalAttrs?.("button") ?? {}
};
}
});
return {
tag,
isLink,
isHyperLink,
isRouterLink,
isButton,
attrs
};
}
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "NcFormBoxButton",
props: {
label: { default: () => void 0 },
description: { default: () => void 0 },
invertedAccent: { type: Boolean, default: false },
to: { default: () => void 0 },
href: { default: () => void 0 },
target: { default: () => void 0 },
disabled: { type: Boolean, default: false }
},
emits: ["click"],
setup(__props) {
const { tag, attrs, isLink } = useButtonLink({
to: toRef(() => __props.to),
href: toRef(() => __props.href),
target: toRef(() => __props.target),
disabled: toRef(() => __props.disabled)
});
const icon = computed(() => {
if (isLink.value) {
return __props.target === "_blank" ? mdiOpenInNew : mdiArrowTopRight;
}
return void 0;
});
return (_ctx, _cache) => {
return openBlock(), createBlock(NcFormBoxItem, mergeProps({
tag: unref(tag),
"item-classes": [
"button-vue",
/* Reset server's global HTML button styles */
_ctx.$style.formBoxButton
],
"inverted-accent": _ctx.invertedAccent
}, unref(attrs), {
tabindex: "0",
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
}), createSlots({ _: 2 }, [
_ctx.$slots.default || _ctx.label ? {
name: "default",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "default", {}, () => [
createTextVNode(toDisplayString(_ctx.label), 1)
])
]),
key: "0"
} : void 0,
_ctx.$slots.description || _ctx.description ? {
name: "description",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "description", {}, () => [
createTextVNode(toDisplayString(_ctx.description), 1)
])
]),
key: "1"
} : void 0,
_ctx.$slots.icon || icon.value ? {
name: "icon",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "icon", {}, () => [
icon.value ? (openBlock(), createBlock(NcIconSvgWrapper, {
key: 0,
path: icon.value,
inline: ""
}, null, 8, ["path"])) : createCommentVNode("", true)
])
]),
key: "2"
} : void 0
]), 1040, ["tag", "item-classes", "inverted-accent"]);
};
}
});
const formBoxButton = "_formBoxButton_15jyc_20";
const style0 = {
"material-design-icon": "_material-design-icon_15jyc_12",
formBoxButton
};
const cssModules = {
"$style": style0
};
const NcFormBoxButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
export {
NcFormBoxButton as N
};
//# sourceMappingURL=NcFormBoxButton-7jokSLLb.mjs.map