@nextcloud/vue
Version:
Nextcloud vue components
101 lines (100 loc) • 3.34 kB
JavaScript
import '../assets/NcAppNavigationCaption-HUg9fMCm.css';
import { N as NcActions } from "./NcActions-DWmvh7-Y.mjs";
import { resolveComponent, createBlock, openBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, createCommentVNode, createTextVNode, toDisplayString, createVNode, normalizeProps, guardReactiveProps, renderSlot } from "vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
const _sfc_main = {
name: "NcAppNavigationCaption",
components: {
NcActions
},
props: {
/**
* The text of the caption
*/
name: {
type: String,
required: true
},
/**
* `id` to set on the inner caption
* Can be used for connecting the `NcActionCaption` with `NcActionList` using `aria-labelledby`.
*/
headingId: {
type: String,
default: null
},
/**
* Enable when used as a heading
* e.g. Before NcAppNavigationList
*/
isHeading: {
type: Boolean,
default: false
},
/**
* If `isHeading` is set, this defines the heading level that should be used
*/
headingLevel: {
type: Number,
default: 2
},
/**
* Any [NcActions](#/Components/NcActions?id=ncactions-1) prop
*/
// Not an actual prop but needed to show in vue-styleguidist docs
...NcActions.props
},
computed: {
actionsProps() {
const actionProps = Object.keys(NcActions.props);
const props = Object.entries(this.$props).filter(([key, _value]) => actionProps.includes(key));
return Object.fromEntries(props);
},
wrapperTag() {
return this.isHeading ? "div" : "li";
},
captionTag() {
const headingLevel = Math.max(2, this.headingLevel);
return this.isHeading ? `h${headingLevel}` : "span";
}
}
};
const _hoisted_1 = {
key: 0,
class: "app-navigation-caption__actions"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_NcActions = resolveComponent("NcActions");
return openBlock(), createBlock(resolveDynamicComponent($options.wrapperTag), {
class: normalizeClass(["app-navigation-caption", { "app-navigation-caption--heading": $props.isHeading }])
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent($options.captionTag), {
id: $props.headingId,
class: "app-navigation-caption__name"
}, {
default: withCtx(() => [
createTextVNode(toDisplayString($props.name), 1)
]),
_: 1
}, 8, ["id"])),
!!_ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(_component_NcActions, normalizeProps(guardReactiveProps($options.actionsProps)), {
icon: withCtx(() => [
renderSlot(_ctx.$slots, "actionsTriggerIcon", {}, void 0, true)
]),
default: withCtx(() => [
renderSlot(_ctx.$slots, "actions", {}, void 0, true)
]),
_: 3
}, 16)
])) : createCommentVNode("", true)
]),
_: 3
}, 8, ["class"]);
}
const NcAppNavigationCaption = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-21e6b451"]]);
export {
NcAppNavigationCaption as N
};
//# sourceMappingURL=NcAppNavigationCaption-D4yUe1MX.mjs.map