@nextcloud/vue
Version:
Nextcloud vue components
294 lines (293 loc) • 8.65 kB
JavaScript
import '../assets/NcBreadcrumb-CHjeSh0y.css';
import { createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString, resolveComponent, withModifiers, normalizeClass, createBlock, createVNode, createSlots, withCtx, renderSlot, createTextVNode } from "vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
import { N as NcButton } from "./NcButton-Dc8V4Urj.mjs";
import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
import { N as NcActions } from "./NcActions-DWmvh7-Y.mjs";
const _sfc_main$1 = {
name: "ChevronRightIcon",
emits: ["click"],
props: {
title: {
type: String
},
fillColor: {
type: String,
default: "currentColor"
},
size: {
type: Number,
default: 24
}
}
};
const _hoisted_1$1 = ["aria-hidden", "aria-label"];
const _hoisted_2 = ["fill", "width", "height"];
const _hoisted_3 = { d: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" };
const _hoisted_4 = { key: 0 };
function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
"aria-hidden": $props.title ? null : "true",
"aria-label": $props.title,
class: "material-design-icon chevron-right-icon",
role: "img",
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
}), [
(openBlock(), createElementBlock("svg", {
fill: $props.fillColor,
class: "material-design-icon__svg",
width: $props.size,
height: $props.size,
viewBox: "0 0 24 24"
}, [
createElementVNode("path", _hoisted_3, [
$props.title ? (openBlock(), createElementBlock("title", _hoisted_4, toDisplayString($props.title), 1)) : createCommentVNode("", true)
])
], 8, _hoisted_2))
], 16, _hoisted_1$1);
}
const ChevronRight = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
const _sfc_main = {
name: "NcBreadcrumb",
components: {
NcActions,
ChevronRight,
NcButton
},
inheritAttrs: false,
props: {
/**
* The main text content of the entry.
*/
name: {
type: String,
required: true
},
/**
* The title attribute of the element.
*/
title: {
type: String,
default: null
},
/**
* Route Location the link should navigate to when clicked on.
*
* @see https://v3.router.vuejs.org/api/#to
*/
to: {
type: [String, Object],
default: void 0
},
/**
* Set this prop if your app doesn't use vue-router, breadcrumbs will show as normal links.
*/
href: {
type: String,
default: void 0
},
/**
* Set a css icon-class to show an icon along name text (if forceIconText is provided, otherwise just icon).
*/
icon: {
type: String,
default: ""
},
/**
* Enables text to accompany the icon, if the icon was provided. The text that will be displayed is the name prop.
*/
forceIconText: {
type: Boolean,
default: false
},
/**
* Disable dropping on this breadcrumb.
*/
disableDrop: {
type: Boolean,
default: false
},
/**
* Force the actions to display in a three dot menu
*/
forceMenu: {
type: Boolean,
default: false
},
/**
* Open state of the Actions menu
*/
open: {
type: Boolean,
default: false
},
/**
* CSS class to apply to the root element.
*/
class: {
type: [String, Array, Object],
default: ""
}
},
emits: [
"dragenter",
"dragleave",
"dropped",
"update:open"
],
setup() {
const crumbId = createElementId();
return {
actionsContainer: `.vue-crumb[data-crumb-id="${crumbId}"]`,
crumbId
};
},
data() {
return {
/**
* Variable to track if we hover over the breadcrumb
*/
hovering: false
};
},
computed: {
/**
* The attributes to pass to `router-link` or `a`
*/
linkAttributes() {
if (this.to) {
return { to: this.to, ...this.$attrs };
} else if (this.href) {
return { href: this.href, ...this.$attrs };
}
return this.$attrs;
}
},
methods: {
/**
* Function to handle changing the open state of the Actions menu
* $emit the open state.
*
* @param {boolean} open The open state of the Actions menu
*/
onOpenChange(open) {
this.$emit("update:open", open);
},
/**
* Function to handle a drop on the breadcrumb.
* $emit the event and the path, remove the hovering state.
*
* @param {object} e The drop event
* @return {boolean}
*/
dropped(e) {
if (this.disableDrop) {
return false;
}
this.$emit("dropped", e, this.to || this.href);
this.$parent.$emit("dropped", e, this.to || this.href);
this.hovering = false;
return false;
},
/**
* Add the hovering state on drag enter
*
* @param {DragEvent} e The drag-enter event
*/
dragEnter(e) {
this.$emit("dragenter", e);
if (this.disableDrop) {
return;
}
this.hovering = true;
},
/**
* Remove the hovering state on drag leave
*
* @param {DragEvent} e The drag leave event
*/
dragLeave(e) {
this.$emit("dragleave", e);
if (this.disableDrop) {
return;
}
if (e.target.contains(e.relatedTarget) || this.$refs.crumb.contains(e.relatedTarget)) {
return;
}
this.hovering = false;
}
}
};
const _hoisted_1 = ["data-crumb-id"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_NcButton = resolveComponent("NcButton");
const _component_NcActions = resolveComponent("NcActions");
const _component_ChevronRight = resolveComponent("ChevronRight");
return openBlock(), createElementBlock("li", {
ref: "crumb",
class: normalizeClass(["vue-crumb", [{ "vue-crumb--hovered": $data.hovering }, _ctx.$props.class]]),
"data-crumb-id": $setup.crumbId,
draggable: "false",
onDragstart: withModifiers(() => {
}, ["prevent"]),
onDrop: _cache[0] || (_cache[0] = withModifiers((...args) => $options.dropped && $options.dropped(...args), ["prevent"])),
onDragover: withModifiers(() => {
}, ["prevent"]),
onDragenter: _cache[1] || (_cache[1] = (...args) => $options.dragEnter && $options.dragEnter(...args)),
onDragleave: _cache[2] || (_cache[2] = (...args) => $options.dragLeave && $options.dragLeave(...args))
}, [
($props.name || $props.icon || _ctx.$slots.icon) && !_ctx.$slots.default ? (openBlock(), createBlock(_component_NcButton, mergeProps({
key: 0,
"aria-label": $props.icon ? $props.name : void 0,
variant: "tertiary"
}, $options.linkAttributes), createSlots({ _: 2 }, [
_ctx.$slots.icon || $props.icon ? {
name: "icon",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "icon", {}, () => [
createElementVNode("span", {
class: normalizeClass([$props.icon, "icon"])
}, null, 2)
], true)
]),
key: "0"
} : void 0,
!(_ctx.$slots.icon || $props.icon) || $props.forceIconText ? {
name: "default",
fn: withCtx(() => [
createTextVNode(toDisplayString($props.name), 1)
]),
key: "1"
} : void 0
]), 1040, ["aria-label"])) : createCommentVNode("", true),
_ctx.$slots.default ? (openBlock(), createBlock(_component_NcActions, {
key: 1,
ref: "actions",
container: $setup.actionsContainer,
"force-menu": $props.forceMenu,
"force-name": "",
"menu-name": $props.name,
open: $props.open,
title: $props.title,
variant: "tertiary",
"onUpdate:open": $options.onOpenChange
}, {
icon: withCtx(() => [
renderSlot(_ctx.$slots, "menu-icon", {}, void 0, true)
]),
default: withCtx(() => [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
]),
_: 3
}, 8, ["container", "force-menu", "menu-name", "open", "title", "onUpdate:open"])) : createCommentVNode("", true),
createVNode(_component_ChevronRight, {
class: "vue-crumb__separator",
size: 20
})
], 42, _hoisted_1);
}
const NcBreadcrumb = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-28ef52a4"]]);
export {
NcBreadcrumb as N
};
//# sourceMappingURL=NcBreadcrumb-Bwkn3eve.mjs.map