@nextcloud/vue
Version:
Nextcloud vue components
124 lines (123 loc) • 4.63 kB
JavaScript
import '../assets/NcButton--Fj4gghF.css';
import { defineComponent, inject, computed, createBlock, openBlock, resolveDynamicComponent, mergeProps, unref, withCtx, createElementVNode, renderSlot, createTextVNode, toDisplayString } from "vue";
import { routerKey } from "vue-router";
import { i as isLegacy } from "./legacy-DcjXBL_t.mjs";
import { u as useNcFormBox } from "./useNcFormBox-DA9iwXWY.mjs";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
const _hoisted_1 = { class: "button-vue__wrapper" };
const _hoisted_2 = { class: "button-vue__icon" };
const _hoisted_3 = { class: "button-vue__text" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "NcButton",
props: {
alignment: { default: "center" },
ariaLabel: { default: void 0 },
disabled: { type: Boolean },
download: { type: [String, Boolean], default: void 0 },
href: { default: void 0 },
pressed: { type: Boolean, default: void 0 },
size: { default: "normal" },
target: { default: "_self" },
text: { default: void 0 },
to: { default: void 0 },
type: { default: "button" },
variant: { default: "secondary" },
wide: { type: Boolean }
},
emits: ["click", "update:pressed"],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const { formBoxItemClass } = useNcFormBox();
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 hasPressedState = computed(() => tag.value === "button" && typeof props.pressed === "boolean");
const variantWithPressed = computed(() => {
if (props.pressed) {
return "primary";
}
if (props.pressed === false && props.variant === "primary") {
return "secondary";
}
return props.variant;
});
const isTertiaryVariant = computed(() => variantWithPressed.value.startsWith("tertiary"));
const flexAlignment = computed(() => props.alignment.split("-")[0]);
const isReverseAligned = computed(() => props.alignment.includes("-"));
const getNcPopoverTriggerAttrs = inject("NcPopover:trigger:attrs", () => ({}), false);
const ncPopoverTriggerAttrs = computed(() => getNcPopoverTriggerAttrs());
const attrs = computed(() => {
if (tag.value === "RouterLink") {
return {
to: props.to,
activeClass: "active"
};
} else if (tag.value === "a") {
return {
href: props.href || "#",
target: props.target,
rel: "nofollow noreferrer noopener",
download: props.download || void 0
};
} else if (tag.value === "button") {
return {
...ncPopoverTriggerAttrs.value,
"aria-pressed": props.pressed,
type: props.type,
disabled: props.disabled
};
}
return void 0;
});
function onClick(event) {
if (hasPressedState.value) {
emit("update:pressed", !props.pressed);
}
emit("click", event);
}
return (_ctx, _cache) => {
return openBlock(), createBlock(resolveDynamicComponent(tag.value), mergeProps({
class: ["button-vue", [
`button-vue--size-${_ctx.size}`,
{
[`button-vue--${variantWithPressed.value}`]: variantWithPressed.value,
"button-vue--tertiary": isTertiaryVariant.value,
"button-vue--wide": _ctx.wide,
[`button-vue--${flexAlignment.value}`]: flexAlignment.value !== "center",
"button-vue--reverse": isReverseAligned.value,
"button-vue--legacy": unref(isLegacy)
},
unref(formBoxItemClass)
]],
"aria-label": _ctx.ariaLabel
}, attrs.value, { onClick }), {
default: withCtx(() => [
createElementVNode("span", _hoisted_1, [
createElementVNode("span", _hoisted_2, [
renderSlot(_ctx.$slots, "icon", {}, void 0, true)
]),
createElementVNode("span", _hoisted_3, [
renderSlot(_ctx.$slots, "default", {}, () => [
createTextVNode(toDisplayString(_ctx.text), 1)
], true)
])
])
]),
_: 3
}, 16, ["class", "aria-label"]);
};
}
});
const NcButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e3b1a10b"]]);
export {
NcButton as N
};
//# sourceMappingURL=NcButton-Dc8V4Urj.mjs.map